<template>
	<view class="comp-b">
		<view class="component-title">子组件B</view>

		<view class="value-display">
			<text>CompA组件传进来的值: {{ valueFromA || '暂无' }}</text>
		</view>

		<view class="callback-section">
			<text>回传值:</text>
			<input type="text" v-model="callbackInput" placeholder="请输入回传值" class="callback-input" />
		</view>

		<button @click="sendCallback" class="callback-button" :disabled="!callbackInput">
			回传
		</button>

	</view>
</template>

<script>
	export default {
		props: {
			valueFromA: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				callbackInput: '0595-2788888' // 默认值匹配图片
			}
		},
		watch: {
			// 监听从A组件传来的值变化
			valueFromA(newVal) {
				if (newVal) {
					console.log('B组件收到来自A的值:', newVal);
				}
			}
		},
		methods: {
			sendCallback() {
				if (this.callbackInput.trim()) {
					// 触发事件回传给父组件
					this.$emit('callBackFun', this.callbackInput);

					uni.showToast({
						title: '已回传值给父组件',
						icon: 'success',
						duration: 1500
					});

					// 清空输入框
					// this.callbackInput = '';
				} else {
					uni.showToast({
						title: '请输入回传值',
						icon: 'none',
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style scoped>
	.comp-b {
		background-color: white;
		padding: 30rpx;
		margin: 20rpx 0;
		border-radius: 10rpx;
		border-left: 8rpx solid #67c23a;
	}

	.component-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #67c23a;
		margin-bottom: 20rpx;
	}

	.value-display {
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
	}

	.value-display text {
		font-size: 28rpx;
		color: #333;
	}

	.callback-section {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 20rpx;
		background-color: #f0f9ff;
		border-radius: 8rpx;
	}

	.callback-section text {
		font-size: 28rpx;
		margin-right: 20rpx;
		width: 150rpx;
		flex-shrink: 0;
	}

	.callback-input {
		flex: 1;
		border: 1px solid #dcdfe6;
		padding: 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.callback-button {
		background-color: #67c23a;
		color: white;
		border: none;
		padding: 20rpx 40rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.callback-button[disabled] {
		background-color: #c0c4cc;
		color: #909399;
	}

	.example-buttons {
		margin-top: 20rpx;
	}

	.example-label {
		font-size: 24rpx;
		color: #909399;
		display: block;
		margin-bottom: 10rpx;
	}

	.example-button {
		background-color: #f0f9ff;
		color: #409eff;
		border: 1px solid #409eff;
		padding: 15rpx 25rpx;
		border-radius: 6rpx;
		font-size: 26rpx;
		margin-right: 15rpx;
		margin-bottom: 10rpx;
	}
</style>